<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>添加管理员 - 管理员管理 - H-ui.admin v3.1</title>
<meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" id="form-oss-add">
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">存储空间：</label>
		<div class="formControls col-xs-8 col-sm-9"> 
			<span class="select-box" style="width:150px;">
				<select class="select" id="bucket" name="bucket" size="1">
					<option th:each="ossUser:${listOssUser}" th:value="${ossUser.bucket}" th:text="${ossUser.bucket}"></option>
				</select>
			</span>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>相对目录路径</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="" placeholder="" id="dir" name="dir">
		</div>
	</div>
	
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>图片预览</label>
		<div class="formControls col-xs-8 col-sm-9">
			<img id="new_img" width="200px" height="200px">
		</div>
	</div>
	 
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>上传</label>
		<div class="formControls col-xs-8 col-sm-9">
			<div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div>
			<div id="container">
				<span class="btn-upload form-group">
					<a id="selectfiles" href="javascript:void();" class="btn btn-primary upload-btn"><i class="Hui-iconfont">&#xe642;</i>选择文件</a>
				</span>
			</div>
		</div>
	</div>
	
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input id="postfiles" class="btn btn-primary radius" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去--> 
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!-- 文件上传相关脚本 -->
<script type="text/javascript" src="/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript">
$(function(){
	
	accessid = ''
	accesskey = ''
	host = ''
	policyBase64 = ''
	signature = ''
	callbackbody = ''
	filename = ''
	key = ''
	expire = 0
	g_object_name = ''
	g_object_name_type = ''
	now = timestamp = Date.parse(new Date()) / 1000; 

	function send_request()
	{
	    var xmlhttp = null;
	    if (window.XMLHttpRequest)
	    {
	        xmlhttp=new XMLHttpRequest();
	    }
	    else if (window.ActiveXObject)
	    {
	        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	  
	    if (xmlhttp!=null)
	    {
	    	var bucket = $("#bucket").val();
	    	var dir = $("#dir").val();
	        // serverUrl是 用户获取 '签名和Policy' 等信息的应用服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
	        serverUrl = '/getOssSign?bucket='+bucket+"&dir="+dir
			
	        xmlhttp.open( "GET", serverUrl, false );
	        xmlhttp.send( null );
	        console.log("调用获取认证");
	        return xmlhttp.responseText
	    }
	    else
	    {
	        alert("Your browser does not support XMLHTTP.");
	    }
	};

	function check_object_radio() {
		g_object_name_type = 'local_name';
	}

	function get_signature()
	{
	    // 可以判断当前expire是否超过了当前时间， 如果超过了当前时间， 就重新取一下，3s 作为缓冲。
	    now = timestamp = Date.parse(new Date()) / 1000; 
	    if (expire < now + 3)
	    {
	        body = send_request()
	        var obj = eval ("(" + body + ")");
	        host = obj['host']
	        policyBase64 = obj['policy']
	        accessid = obj['accessid']
	        signature = obj['signature']
	        expire = parseInt(obj['expire'])
	        callbackbody = obj['callback'] 
	        key = obj['dir']
	        return true;
	    }
	    return false;
	};

	function random_string(len) {
	　　len = len || 32;
	　　var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';   
	　　var maxPos = chars.length;
	　　var pwd = '';
	　　for (i = 0; i < len; i++) {
	    　　pwd += chars.charAt(Math.floor(Math.random() * maxPos));
	    }
	    return pwd;
	}
	/*获取文件后缀名*/
	function get_suffix(filename) {
	    pos = filename.lastIndexOf('.')
	    suffix = ''
	    if (pos != -1) {
	        suffix = filename.substring(pos)
	    }
	    return suffix;
	}
	
	function calculate_object_name(filename)
	{
	    if (g_object_name_type == 'local_name')
	    {
	        g_object_name += "${filename}"
	    }
	    else if (g_object_name_type == 'random_name')
	    {
	        suffix = get_suffix(filename)
	        g_object_name = key + random_string(10) + suffix
	    }
	    return ''
	}

	function get_uploaded_object_name(filename)
	{
	    if (g_object_name_type == 'local_name')
	    {
	        tmp_name = g_object_name
	        tmp_name = tmp_name.replace("${filename}", filename);
	        return tmp_name
	    }
	    else if(g_object_name_type == 'random_name')
	    {
	        return g_object_name
	    }
	}

	function set_upload_param(up, filename, ret)
	{
	    if (ret == false)
	    {
	        ret = get_signature()
	    }
	    g_object_name = key;
	    if (filename != '') { 
	    	suffix = get_suffix(filename)
	        calculate_object_name(filename)
	    }
	    new_multipart_params = {
	        'key' : g_object_name,
	        'policy': policyBase64,
	        'OSSAccessKeyId': accessid, 
	        'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
	        'callback' : callbackbody,
	        'signature': signature,
	    };

	    up.setOption({
	        'url': host,
	        'multipart_params': new_multipart_params
	    });

	    up.start();
	}

	var uploader = new plupload.Uploader({
		runtimes : 'html5,flash,silverlight,html4',
		browse_button : 'selectfiles', 
	    //multi_selection: false,
		container: document.getElementById('container'),
		flash_swf_url : '/oss/lib/plupload-2.1.2/js/Moxie.swf',
		silverlight_xap_url : '/oss/lib/plupload-2.1.2/js/Moxie.xap',
	    url : 'http://oss.aliyuncs.com',

	    filters: {
	        mime_types : [ //只允许上传图片和zip文件
	        { title : "Image files", extensions : "jpg,gif,png,bmp" }, 
	        { title : "Zip files", extensions : "zip,rar" },
	        { title : "Music files", extensions : "mp3,wmv,flac" },
	        { title : "Video files", extensions : "mp4,avi" },
	        { title : "Text files", extensions : "txt,properties" }
	        ],
	        max_file_size : '1024mb', //最大只能上传1024mb的文件
	        prevent_duplicates : true //不允许选取重复文件
	    },

		init: {
			PostInit: function() {
				console.log("PostInit:进页面初始化");
				document.getElementById('ossfile').innerHTML = '';
				document.getElementById('postfiles').onclick = function() {
		            set_upload_param(uploader, '', false);
		            return false;
				};
			},
			
			FilesAdded: function(up, files) {
				console.log("FilesAdded:文件被添加后");
				plupload.each(files, function(file) {
					console.log(file);
					var preloader = new mOxie.Image();
					if(file.type.indexOf('image')!=-1){
						preloader.onload = function() {
				            preloader.downsize(300, 300); //先压缩一下要预览的图片,宽300，高300
				            var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
				            
				            $("#new_img").attr("src",imgsrc);
				            
				            preloader.destroy();
				            preloader = null;
				        };
				        preloader.load(file.getSource());
					}
					document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
					+'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
					+'</div>';
				});
			},

			BeforeUpload: function(up, file) {
				console.log("BeforeUpload:点击开始上传之前检查操作");
	            check_object_radio();
	            set_upload_param(up, file.name, true);
	        },

			UploadProgress: function(up, file) {
				console.log("UploadProgress");
				var d = document.getElementById(file.id);
				d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
	            var prog = d.getElementsByTagName('div')[0];
				var progBar = prog.getElementsByTagName('div')[0]
				progBar.style.width= 2*file.percent+'px';
				progBar.setAttribute('aria-valuenow', file.percent);
			},

			FileUploaded: function(up, file, info) {
				console.log("FileUploaded");
				console.log(up);
				console.log(file);
				console.log(info);
	            if (info.status == 200)
	            {
	                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = "成功上传"+get_uploaded_object_name(file.name)+"文件!";
	                window.parent.location.reload(); //刷新父页面
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
	            }
	            else
	            {
	                alert(info.response);
	            } 
			},

			Error: function(up, err) {
				console.log("Error");
	            if (err.code == -600) {
	                document.getElementById('console').appendChild(document.createTextNode("\n选择的文件太大了,可以根据应用情况，在upload.js 设置一下上传的最大大小"));
	            }
	            else if (err.code == -601) {
	                document.getElementById('console').appendChild(document.createTextNode("\n选择的文件后缀不对,可以根据应用情况，在upload.js进行设置可允许的上传文件类型"));
	            }
	            else if (err.code == -602) {
	                document.getElementById('console').appendChild(document.createTextNode("\n这个文件已经上传过一遍了"));
	            }
	            else 
	            {
	                document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
	            }
			}
		}
	});

	uploader.init();
});
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>